<template>
    <div id="app">
        <el-container>
            <el-header>
                <h1>数据统计</h1>
            </el-header>
            <el-row :gutter="10">
                <el-col :span="12">
                    <div style="width: 100%; height: 400px" id="line" ></div>
                </el-col>
                <el-col :span="12">
                    <div style="width: 100%; height: 400px" id="bar" ></div>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="12">
                    <div style="width: 100%; height: 400px" id="main" ></div>
                </el-col>
            </el-row>
        </el-container>
    </div>
</template>

<script>
import * as echarts from 'echarts'

let option = {
    title: {
        text: '收藏点赞数量'
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['玄幻小说', '修真小说', '都市小说', '历史小说', '网游小说', '科幻小说', '其他小说'],
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '收藏数量',
            data: [50,50,50,50, 50, 50, 50],
            type: 'line',
            smooth: true
        },
        {
            name: '点赞数量',
            data: [25,25,25,25,25,25,25],
            type: 'line',
            smooth: true
        }
    ]
};

let option2 = {
    title: {
        text: '收藏点赞数量'
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '收藏数量',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'bar',
            smooth: true
        },
        {
            name: '点赞数量',
            data: [120, 132, 101, 134, 90, 230, 210],
            type: 'bar',
            smooth: true
        }
    ]
};

let option3 = {
    title: {
        text: 'Referer of a Website',
        subtext: 'Fake Data',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
export default {
    name: 'houtai',
    data() {
        return {

        };
    },
    mounted() { // 等待页面全部加载完成之后，再初始化
        let lineDom = document.getElementById('line');
        let lineChart = echarts.init(lineDom);
        lineChart.setOption(option)

        let barDom = document.getElementById('bar');
        let barChart = echarts.init(barDom);
        barChart.setOption(option2)

        let chartDom = document.getElementById('main');
        let myChart = echarts.init(chartDom);
        myChart.setOption(option3);

        this.$request.get('/novels/chars').then(res => {
            option.xAxis.data = res.map(item => item.type);
            option.series[0].data = res.map(item => item.count);
            lineChart.setOption(option)

            option2.xAxis.data = res.map(item => item.type);
            option2.series[0].data = res.map(item => item.count);
            barChart.setOption(option2)

            option3.series[0].data = res.map(item => {
                return {
                    value: item.count,
                    name: item.type
                }
            });
            myChart.setOption(option3);
        })
    }
}
</script>

<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>